<template>
    <div class="subset">
        <yk-space>
            <div class="subset_menu" :class="{ 'subset_menu-selected': selected == 'all' }"
                @click="changeSelected(-1, 'all')">
                全部{{ subsetStore.count }}
            </div>
            <!-- 如果没有分类，未分类不显示 -->
            <div v-if="subsetStore.exclude.id" class="subset_menu" :class="{ 'subset_menu-selected': selected == 'exclude' }"
                @click="changeSelected(subsetStore.exclude.id, 'exclude')">
                {{ subsetStore.exclude.name }}{{ subsetStore.exclude.count }}
            </div>
            <div class="subset_menu" v-for="item in stateCount" :key="item.id"
                :class="{ 'subset_menu-selected': selected == `${item.id}state` }"
                @click="changeSelected(item.id, 'state')" v-if="props.classify === 0">
                {{ item.name }}{{ item.value }}
            </div>
            <div class="subset_menu" v-for="item in subsetStore.data" :key="item.id"
                :class="{ 'subset_menu-selected': selected == `${item.id}subset` }"
                @click="changeSelected(item.id, 'subset')">
                {{ item.name }}{{ item.value }}
            </div>
        </yk-space>
        <yk-space>
            <yk-popconfirm title="新建分组" @cancel="cancel" placement="bottom" @confirm="confirm(props.classify)" trigger="click">
                <yk-text type="primary" style="line-height:32px;">
                    <IconCirclePlusOutline />新建
                </yk-text>
                <template #content> 
                    <div style="margin:8px 4px 16px 0">
                        <yk-input show-counter :limit="10" placeholder="请输入分组名称" stype="width:208px"
                            v-model="inputValue" />
                    </div>
                </template>
            </yk-popconfirm>
            <yk-text type="primary" @click="showModal" style="line-height:32px;">
                <IconSettingsOutline />管理分组
            </yk-text>
        </yk-space>
        <yk-modal v-model="visible" title="管理分组">
            <span>
                <SubsetManage />
            </span>
            <template #footer>
                <yk-button @click="showModal">确定</yk-button>
            </template>
        </yk-modal>
    </div>
</template>
<script setup lang="ts">
import { ref,onMounted} from 'vue';
import { useSubsetStore } from '../../stores/subset';
import { useSubset } from '../../hooks/subsetHook';
import SubsetManage from './subset-manage.vue';
const subsetStore = useSubsetStore();
const props = defineProps({
    classify: {
        type: Number,
        default: -1
    }
});
const emit = defineEmits(['nowSubset']); // 定义提交表单数据的事件

const { 
    rawSubset,//获取分组
    confirm,//新建分组
    cancel,//取消新建
    inputValue, //新建分组输入框内容
    stateCount,//文章状态,
} = useSubset(); //管理分组选择

//管理分组打开弹窗
const visible = ref<boolean>(false)
const showModal = () => {
    visible.value = !visible.value
}
// 当前选择
type SelectionValue = 'all' | 'exclude' | `${number}state` | `${number}subset`;
const selected = ref<SelectionValue>('all');
// 选择切换
const changeSelected = (id: number |string, type:string): void => {
    let newSelected: SelectionValue = `${id}${type}` as SelectionValue;
    if(type === 'all' || type === 'exclude'){
        newSelected = type;
    }
    if (newSelected !== selected.value) {
        selected.value = newSelected;
        emit('nowSubset', {id,type}); // 提交表单数据
    }
};


onMounted(() => {
    rawSubset(props.classify);
})

</script>

<style scoped lang="less">
.subset {
    padding: @space-l @space-xl;
    border-radius: @radius-m;
    background-color: @bg-color-l;
    width: 100%;
    display: flex;
    justify-content: space-between;

    &_menu {
        padding: 0 @space-l;
        border-radius: @radius-r;
        background-color: @bg-color-s;
        line-height: 32px;
        user-select: none;
        cursor: pointer;

        &-selected {
            background-color: @pcolor-1;
            color: @pcolor;
            font-weight: 500;
        }
    }
}
</style>